<template>
    <div>
        <h3>个人设置首页</h3>
        <mineReturn title="我的账号" />

        <van-cell title="头像">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
                <van-icon name="search" class="search-icon" @click="changePhoto"/>
            </template>
        </van-cell>

        <van-cell :value=name is-link @click="changeName">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title" :name="name" >昵称</span>
            </template>
        </van-cell>
        <van-cell :value=phone is-link @click="changePhone">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title"  :phone="phone">修改号码</span>
            </template>
        </van-cell>

    </div>
</template>

<script>
export default {
    data(){
        return {
            name:"赵友松",
            phone:"19819277556",
            src : ""
        }
    },
    methods:{
        changePhoto(){
            this.$router.push('/aboutMine/myset/photo-change')
        },
        changePicture(){
            this.$router.push('/aboutMine/myset/picture-change')
        },
        changeName(){
            this.$router.push('/aboutMine/myset/changeName')
        },
        changePhone(){
            this.$router.push('/aboutMine/myset/changePhoe')
        }
    }

}                                                       
</script>

<style lang="scss" scoped>
.search-icon {
    font-size: 20px;
    line-height: inherit;
}

.custom-title {
    margin-right: 4px;
    vertical-align: middle;
}
</style>